<template>
  <div class="rounded shadow-xl h-full">
    <div id="container" class="h-full"></div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, watch } from "vue";

const props = defineProps({
  mapPoint: {
    type: Object,
    required: true,
  },
});

let map: any;
let drawMarker: any;

onMounted(() => {
  const BMap = window.BMap;
  map = new BMap.Map("container"); // 创建地图实例
  map.centerAndZoom(new BMap.Point(116.414, 39.915), 10);
  map.enableScrollWheelZoom(true);
  drawMarker = () => {
    map.clearOverlays(); // 清除之前的覆盖物
    const point = new BMap.Point(props.mapPoint.lat, props.mapPoint.lon); // 创建新的点坐标
    const marker = new BMap.Marker(point);
    map.addOverlay(marker);
    map.setCenter(point);
  };

  drawMarker();
});
/**
 * 监听 props.mapPoint 变化，重新绘制机器人位置
 */
watch(
  () => props.mapPoint,
  () => {
    if (drawMarker) {
      drawMarker();
    }
  }
);
</script>
